<template>
  <div
    class="login"
    :style="{ background: 'url(' + bg + ') no-repeat', height: bgHeight }"
  >
    <div class="guangao" v-if="count !== 0">
      <div class="timer" @click="count = 0">{{ count }}s | 跳过</div>
      <img src="@/assets/img/guanggao1.png" alt="" @load="handleLoad" />
    </div>
    <div v-else>
      <img class="imagetext" src="@/assets/img/logo.png" alt="" />
      <div class="imageTitleBox">
        <img
          v-if="ShowText"
          class="imageTitle"
          src="@/assets/img/text.png"
          alt=""
        />
        <img v-else class="imageTitle" src="@/assets/img/text1.png" alt="" />
      </div>
      <form
        class="loginWrapper"
        novalidate
        @submit.prevent="validateBeforeSubmit"
      >
        <input-validate
          v-model="formData.mobile"
          placeholder="请输入您的手机号"
          v-validate="'required|mobile'"
          name="mobile"
          type="phone"
          icon="iconshouji1"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="您的手机号"
          :error="errors.first('mobile')"
        >
        </input-validate>
        <input-validate
          v-model="formData.password"
          placeholder="输入您的密码"
          type="password"
          icon="iconmima"
          name="password"
          v-validate="'required'"
          data-vv-value-path="innerValue"
          data-vv-validate-on="input"
          data-vv-as="您的密码"
          :error="errors.first('password')"
        >
        </input-validate>
        <div class="login-btn">
          <a-button
            type="primary"
            block
            class="btn"
            html-type="submit"
            :style="{ background: 'url(' + bgBtn + ') no-repeat' }"
            >登 录</a-button
          >
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import bg from "@/assets/img/login1.png";
import bgBtn from "@/assets/img/bg-btn.jpg";
import { Dialog, ScrollView, Field, Toast } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "",
  components: {
    [Dialog.name]: Dialog,
    [ScrollView.name]: ScrollView,
    inputValidate,
    [Field.name]: Field
  },
  data() {
    return {
      isShow: false,
      ShowText: true,
      count: 3,
      bg: bg,
      bgBtn: bgBtn,
      visible: false,
      type: "",
      title: "",
      isChecked: true,
      formData: {
        mobile: "",
        password: ""
      },
      imgUrl: "",
      timer: null,
      bgHeight: 0
    };
  },
  methods: {
    handleLoad() {
      const TIME_COUNT = 3;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          this.$ajax
            .post(this.$api.login, this.formData, false, "登录中")
            .then(res => {
              if (res.status === 200) {
                this.$message.success("登录成功！");
                localStorage.setItem("mtoken", this.$crypto.setAES(res.token));
                this.$store.dispatch("changeLoginStatus", true);
                this.$router.push({ name: "home" });
              } else if (res.status === 222) {
                this.isShow = true;
              }
            })
            .catch(err => {
              Toast.failed(err, 3000, true);
            });
        }
      });
    }
  },
  created() {
    this.bgHeight = document.body.scrollHeight + "px";
    var timestamp = Date.parse(new Date());
    if (timestamp < 1579881600000) {
      this.ShowText = true;
    } else {
      this.ShowText = false;
    }
  }
};
</script>

<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  background-size: 100%, 100% !important;
  .guangao {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    .timer {
      position: fixed;
      right: 20px;
      top: 20px;
      color: white;
      font-size: 24px;
      padding: 10px 20px;
      border-radius: 15px;
      background: rgba(0, 0, 0, 0.5);
    }
    img {
      width: 100%;
    }
  }
  .imagetext {
    margin: 63px 0 54px 74px;
    width: 109px;
  }
  .imageTitleBox {
    text-align: center;
    margin-bottom: 50px;
  }
  .imageTitle {
    width: 494px;
  }
  .loginWrapper {
    width: 65.4%;
    margin: 0 auto;
    .btn {
      height: 87px;
      border-radius: 23px;
      font-size: 35px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
